<template>
	<view>
		<u-navbar :title="title" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		<view class="flex margin">
			<view class="flex w-100">
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 0}" @click="selectTab(0)">可使用</view>
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 1}" @click="selectTab(1)">待赠送</view>
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 2}" @click="selectTab(2)" v-if="title == '过期积分明细'">过期积分</view>
			</view>
		</view>
		<view v-if="tabIndex == 0">
			<view class="padding-bottom-sm">
				<u-tabs :list="list" lineColor="#e60000" :itemStyle="{width: '33.3%', height: '88rpx'}" :activeStyle="{color: '#e60000'}" :inactiveStyle="{color: '#333333'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
			</view>
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in walletList" :key="index">
				<view class="flex justify-between font-15 text-bold">
					<view>{{item.incomeFlag ? '收入' : '支出'}}</view>
					<view>{{item.incomeFlag ? '+' : '-'}}{{item.amount}}</view>
				</view>
				<view class="font-13 margin-tb-sm">{{item.remark}}</view>
				<view class="flex justify-between font-13 text-gray">
					<view>{{item.createTime}}</view>
					<view>余额：{{item.afterAmount}}</view>
				</view>
			</view>
			<empty :show="walletList.length == 0" />
		</view>
		
		<view v-if="tabIndex == 1">
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in releasedList" :key="index">
				<view class="flex justify-between font-15 text-bold">
					<view>{{item.awardName}}</view>
					<view>+{{item.awardAmount}}</view>
				</view>
				<view class="flex align-center justify-between margin-top-sm text-gray">
					<view>已赠送积分：{{item.releasedAmount || 0}}</view>
					<view>剩余待赠送积分：{{item.residueWaitReleaseAmount || 0}}</view>
				</view>
				<view class="margin-top-sm text-gray">
					<view>{{item.awardTime}}</view>
				</view>
			</view>
			<empty :show="releasedList.length == 0" />
		</view>
		
		<view v-if="tabIndex == 2">
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in pointsExpiredData" :key="index">
				<view class="text-gray line-h-50">
					<view class="color-b">触发过期数量：{{item.money || 0 }}</view>
					<view>触发三天有效时间：{{item.triggeringTime || null }}</view>
					<view>预计过期时间：{{item.expirationTime || null }}</view>
					<view class="color-r" v-if="item.state == 1">
						<u-count-down :time="item.finishTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
							<view class="time">
								<text class="time__item">还剩</text>
								<text class="time__item" v-if="timeData.days">{{ timeData.days }}&nbsp;天</text>
								<text class="time__item">{{ timeData.hours }}&nbsp;时</text>
								<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
								<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
								<text class="time__item">过期</text>
							</view>
						</u-count-down>
					</view>
					<view class="color-r" v-if="item.state == 2">已过期</view>
				</view>
			</view>
			<empty :show="pointsExpiredData.length == 0" />
		</view>
		
		<u-loadmore :status="status" color="#cccccc" class="padding-bottom padding-top-xs"/>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { walletFlow, findBuyReleasedList } from '@/common/api/customer.js'
	import { pointsExpiredList } from '@/common/api/customer.js'
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '全部',
				}, {
					name: '收入',
				}, {
					name: '支出',
				}],
				status: 'loading',
				title: '明细',
				pageNo: 0,
				walletList: [],
				incomeFlag: null,
				walletType: '',
				tabIndex: 0,
				releasedList: [],
				pointsExpiredData:[],//过期积分列表
				timeData: {},
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(options) {
			this.tabIndex = options.tabIndex ||　0
			this.walletType = options.walletType
			this.title = options.title
			if(this.tabIndex == 0) {
				this.getwalletFlow()
			}
			if(this.tabIndex == 1) {
				this.getFindBuyReleasedList()
			}
			if(this.tabIndex == 2) {
				this.getExpiredPointList()
			}
		},
		onReachBottom() {
			if(this.tabIndex == 0) {
				this.getwalletFlow()
			}
			if(this.tabIndex == 1) {
				this.getFindBuyReleasedList()
			}
			if(this.tabIndex == 2) {
				this.getExpiredPointList()
			}
		},
		methods: {
			// 时间倒计时
			onChange(e) {
                this.timeData = e
            },
			// 过期积分列表
			getExpiredPointList(){
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					pageSize: 10
				}
				pointsExpiredList(params).then(res => {
					if(this.pageNo == 1){
						this.pointsExpiredData = res.data
					}else{
						this.pointsExpiredData = this.pointsExpiredData.concat(res.data)
					}
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
					this.showTime()
				})
			},
			// 计算过期倒计时
			showTime(){
				if(this.pointsExpiredData.length > 0){
					this.pointsExpiredData.forEach(item => {
						item['finishTime'] = null
						if(item.state == 1){
							//设置2020年春节时间
							var newyear=new Date(item.expirationTime);
							//获取当前时间
							var date1=new Date();
							//两个日期对象直接相减就能获取两个日期相差的时间戳(以毫秒计，也就是能得出相差多少毫秒)
							var ms=newyear-date1;
							item['finishTime'] = ms;
						}

					})
				}
			},
			// tab切换
			selectTab(index) {
				this.tabIndex = index
				if(this.tabIndex == 0) {
					this.resetData()
					this.getwalletFlow()
				}
				if(this.tabIndex == 1) {
					this.resetData()
					this.getFindBuyReleasedList()
				}
				if(this.tabIndex == 2) {
					this.resetData()
					this.getExpiredPointList()
				}
			},
			getFindBuyReleasedList() {
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					pageSize: 10,
					walletIds: this.walletType
				}
				if(this.incomeFlag != null) {
					params.incomeFlag = this.incomeFlag
				}
				findBuyReleasedList(params).then(res => {
					this.releasedList = this.releasedList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			getwalletFlow() {
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					pageSize: 10
				}
				if(this.incomeFlag != null) {
					params.incomeFlag = this.incomeFlag
				}
				walletFlow(params,this.walletType).then(res => {
					this.walletList = this.walletList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			resetData() {
				this.pageNo = 0
				this.walletList = []
				this.releasedList = []
				this.incomeFlag = null
			},
			handelTab(e) {
				this.resetData()
				this.current = e.index
				if(this.current == 1) {
					this.incomeFlag = 1
				}
				if(this.current == 2) {
					this.incomeFlag = 0
				}
				this.getwalletFlow()
			},
			copyCode() {
				let that = this
				uni.setClipboardData({
					data: this.userInfo.invitationCode,
					success: function() {
						that.$msg('复制成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.level {
	background: linear-gradient(-90deg, #FF9701 0%, #FFB21F 100%);
	color: #ffffff;
	font-size: 24rpx;
	padding: 2rpx 20rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	min-width: 96rpx;
	text-align: center;
}
.tab-item {
	flex: 1;
	height: 64rpx;
	box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
	color: #FA3121;
	text-align: center;
	line-height: 64rpx;
	font-size: 30rpx;
	border: 1px solid #FA3121;
	border-radius: 16rpx;
	margin-right: 20rpx;
}
.tab-item:last-child{
	margin-right: 0;
}
.tab-item-active {
	background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
	color: #ffffff;
	border: none !important;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
</style>
